<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<link rel="stylesheet" type="text/css" href="/resa/css/jquery-ui-1.8.4.css" />
	<link rel="stylesheet" type="text/css" href="/resa/css/reset.css" />
	<link rel="stylesheet" type="text/css" href="/resa/css/jquery.ganttView.css" />
	  <!-- Bootstrap -->
    <!--<link href="/resa/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <!-- Font Awesome -->
    <link href="/resa/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    
    
    
	<style type="text/css">
		body {
			font-family: tahoma, verdana, helvetica;
			font-size: 0.8em;
			padding: 10px;
		}
				::-webkit-scrollbar {/*滚动条*/
		    width:5px;
		    height: 10px;
		}
		::-webkit-scrollbar-track {/*滚动槽*/
		    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
		    border-radius:10px;
		}
		::-webkit-scrollbar-thumb {/*滚动条滑块*/
		    border-radius:10px;
		    background:rgba(0,0,0,0.1);
		    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
		}	
		 	.success{
  		background-color:rgba(34,215,187,.3);
  		color:#878787;
  		padding: 3px 15px;
  		border-radius: 3px;
  		font-size: 14px;
  		
  	}

		.ing{
			background-color:rgba(243,197,65,.3);
			color:#878787;
			padding: 5px 15px;
			border-radius: 3px;
			font-size: 14px;
		}
		.ing i{
			color: #FEA31D;
		}

		.error{
			background-color:rgba(244,197,202,.3);
			color:#878787;
			padding: 5px 15px;
			border-radius: 3px;
			font-size: 14px;
		}
		.error i{
			color: #F95A55;
		}
  	.ba{
  		background: rgb(209, 246, 240);
  	}
		span{
			font-size: .75rem;
		}
	</style>
	<title>jQuery Gantt</title>
</head>
<body style="height: 520px;">
	<span  id="pid" style="display: none" th:text="${pid}"></span>
	<div id="ganttChart" ></div>
	<br/><br/>
	<div id="eventMessage">
		
	</div>


	<script type="text/javascript" src="/resa/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/resa/js/date.js"></script>
	<script type="text/javascript" src="/resa/js/jquery-ui-1.8.4.js"></script>
	<script type="text/javascript" src="/resa/js/jquery.ganttView.js"></script>
	<!--<script type="text/javascript" src="data.js"></script>-->
    
	<script type="text/javascript">
		$(function () {
			$.ajax({
				url:'/resa/project/task/gantetu/'+$('#pid').text()+'.do',
				type:'get',
				dataType:'json',
				success:function(result){
					$("#ganttChart").ganttView({
						// dataUrl: '/resa/project/task/gantetu/'+$('#pid').text()+'.do',
						data:result,
						slideWidth: 630,
						behavior: {
							onClick: function (data) {

								var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
								$("#eventMessage").text(msg);
							},
							onResize: function (data) {
								var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
								$("#eventMessage").text(msg);
							},
							onDrag: function (data) {
								var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
								$("#eventMessage").text(msg);
							}
						}
					});

					// clicks();
					var row=$(".ganttview-grid-row");
					var item=$(".ganttview-vtheader-item");
					var block=$('.ganttview-block-container');
					console.log("row-"+row.length)
					var i=0
					var j=0
					$(".ganttview-vtheader-item").each(function(i,m){
						console.log(m)
						$(m).mouseover(function(){
							console.log(this)
							$(this).addClass('ba')
							$(row[i]).children('.ganttview-grid-row-cell').addClass('ba')

							var backColor=$(block[i].children).css('background-color')
							var  now=backColor.split('(')[1].split(')')[0].split(',')
							$(block[i].children).css('background-color','rgba('+now[0]+","+now[1]+","+now[2]+')')
						})
						$(m).mouseout(function(){

							$(this).removeClass('ba')
							$(row[i]).children('.ganttview-grid-row-cell').removeClass('ba')

							var backColor=$(block[i].children).css('background-color')
							var  now=backColor.split('(')[1].split(')')[0]
							$(block[i].children).css('background-color','rgba('+now+',0.4)')


						})
					})

					$(".ganttview-grid-row").each(function(j,m){
						$(m).mouseover(function(){
							$(item[j]).mouseover()
						})
						$(m).mouseout(function(){
							$(item[j]).mouseout()
						})
					})
					$(".ganttview-block-container").each(function(j,m){
						$(m).mouseover(function(){
							$(item[j]).mouseover()
						})
						$(m).mouseout(function(){
							$(item[j]).mouseout()
						})
					})

				}
			})




		});




		</script>

</body>
</html>
